<script setup lang="ts">
  import type { Comment } from '@/types/blog'

  interface Props {
    comments: Comment[]
  }

  const props = defineProps<Props>()
  // 确保props被使用
  const { comments } = props

  const emit = defineEmits<{
    'post-click': [postId: string]
  }>()

  const handlePostClick = (postId: string) => {
    emit('post-click', postId)
  }
</script>

<template>
  <div class="recent-comments">
    <div v-if="comments.length === 0" class="empty-state">
      <div class="empty-icon">💬</div>
      <p>暂无评论</p>
    </div>

    <div v-else class="comments-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <div class="author-info">
            <img
              :src="comment.avatar || 'https://picsum.photos/32/32?random=' + comment.id"
              :alt="comment.author"
              class="author-avatar"
            />
            <div class="author-details">
              <div class="author-name">{{ comment.author }}</div>
              <div class="comment-time">{{ comment.createTime }}</div>
            </div>
          </div>
        </div>

        <div class="comment-content">
          <p class="comment-text">{{ comment.content }}</p>
        </div>

        <div class="comment-footer">
          <button class="post-link" @click="handlePostClick(comment.postId)">
            来自: {{ comment.postTitle }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .recent-comments {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 1rem 0;

    .empty-icon {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }

    p {
      margin: 0;
      font-size: 0.9rem;
    }
  }

  .comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .comment-item {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--primary-color);
      box-shadow: var(--shadow-sm);
    }
  }

  .comment-header {
    margin-bottom: 0.75rem;
  }

  .author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .author-details {
    flex: 1;
    min-width: 0;
  }

  .author-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
  }

  .comment-time {
    font-size: 0.75rem;
    color: var(--text-tertiary);
  }

  .comment-content {
    margin-bottom: 0.75rem;
  }

  .comment-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .comment-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
  }

  .post-link {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;

    &:hover {
      color: var(--primary-hover);
      text-decoration: underline;
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .recent-comments {
      padding: 1rem;
    }

    .comment-item {
      padding: 0.75rem;
    }

    .author-avatar {
      width: 28px;
      height: 28px;
    }

    .author-name {
      font-size: 0.85rem;
    }

    .comment-text {
      font-size: 0.8rem;
    }
  }
</style>
